<template>
    <div class="publicAlbum">
        <div class="moduleHead">
            <span class="center">
                <router-link :to="{ name: 'me' }">
                    <span class="back"></span>
            </router-link>
            <span>{{language.publicAlbum_title}}</span>
            <router-link :to="{ name: 'photoPrivacy' }">
                <span class="btnSetting"></span>
            </router-link>
            </span>
        </div>
        <div class="body">
            <dl class="photoListLi">
                <router-link :to="{ name: 'uploadPhoto',query: { type: 'public'}}">
                    <div class="btnUpload main_border"></div>
                </router-link>
                <dd @click="openDialogSlider(index)" class="photoListLi" v-for="(item, index) in publicPhotoList" :key="item.item_id">
                    <div class="img">
                        <LazyImg :src="item.picture"></LazyImg>
                    </div>
                </dd>
            </dl>
        </div>
        <DialogSlider v-if='dialogSlider' :propsDialogSlider.sync="dialogSlider " :propsList.sync="list " :propsIndex.sync="index " :propsDialogType.sync="type ">
        </DialogSlider>
    </div>
</template>
<script>
import DialogSlider from './DialogSlider'
import LazyImg from './LazyImg'

export default {

    name: 'publicAlbum',

    components: {
        DialogSlider,
        LazyImg
    },

    computed: {
        publicPhotoList() {
            return this.$store.state.user.userInfo.pictures;
        }
    },

    data: function() {
        return {
            type: 'edit-public',
            index: 0,
            dialogSlider: false,
            list: []
        }
    },

    methods: {

        imgStyleObject(item) {
            let str = '';
            if (item) {
                str = 'background-image:url(' + item.picture + ')';
            }
            return str;
        },

        getPicturesPS: function() {
            var arr = this.publicPhotoList,
                psArr = [];
            for (var i in arr) {
                var obj = {
                    mssrc: arr[i].icon,
                    src: arr[i].picture,
                    pid: arr[i].item_id,
                    title: arr[i].desc,
                    w: arr[i].ix,
                    h: arr[i].iy,
                }
                psArr.push(obj);
            }
            return psArr;
        },

        openDialogSlider: function(index) {
            this.dialogSlider = true;
            this.index = index;
            this.list = this.getPicturesPS();
        }
    }
}

</script>
<style scoped>
.publicAlbum {
    background: #fff;
    padding-top: 44px;
}

.publicAlbum .body {
    padding-bottom: 40px;
}

.publicAlbum .btnSetting {
    height: 44px;
    width: 44px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    display: block;
    background-image: url(../assets/ico_photo_setting.png);
    background-size: 27px auto;
    background-repeat: no-repeat;
    background-position: center;
}

.publicAlbum .photoListLi {
    overflow: hidden;
}

.publicAlbum .photoListLi dd {
    float: left;
    margin: 8px 0 0 8px;
    height: 0;
    width: calc((100% - 40px) / 4);
    padding-bottom: calc((100% - 40px) / 4);
    overflow: hidden;
    position: relative;
}

.publicAlbum .photoListLi dd:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #f6f7f9 url(../assets/max_loading.gif) center no-repeat;
    background-size: 30px 30px;
}

.publicAlbum .photoListLi dd .img {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.publicAlbum .btnUpload {
    position: relative;
    float: left;
    margin: 8px 0 0 8px;
    height: 0;
    width: calc((100% - 40px) / 4);
    padding-bottom: calc((100% - 40px) / 4);
    overflow: hidden;
}

.publicAlbum .btnUpload:before {
    content: '';
    width: 26px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -1px 0 0 -13px;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: inherit;
    opacity: .7;
}

.publicAlbum .btnUpload:after {
    content: '';
    width: 2px;
    height: 26px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -13px 0 0 -1px;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: inherit;
    opacity: .7;
}

</style>
